<template>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="transportId"
          label="物流运输记录的唯一标识"
          width="150">
        </el-table-column>
        <el-table-column
          prop="cropName"
          label="运输的产品(商品名称)"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cargoName"
          label="仓库名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="retailName"
          label="零售商名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="processName"
          label="加工厂名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="transportDate"
          label="运输开始日期和时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="expectedDeliveryDate"
          label="预计送达日期和时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="fromLocation"
          label="运输起始地点"
          width="120">
        </el-table-column>
        <el-table-column
          prop="toLocation"
          label="运输目的地点"
          width="120">
        </el-table-column>
        <el-table-column
          prop="transportMethod"
          label="运输方式"
          width="120">
        </el-table-column>
        <el-table-column
          prop="carrierId"
          label="承运人或运输公司ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="trackingNumber"
          label="运输的产品数量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="120">
          <template v-slot="s">
            <el-tag v-if="s.row.status==1">未运输</el-tag>
            <el-tag v-if="s.row.status==2">运输中</el-tag>
            <el-tag v-if="s.row.status==3">运输完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="notes"
          label="运输过程中的特别说明或备注"
          width="120">
        </el-table-column>
        <el-table-column
          prop="qstatus"
          label="是否签收"
          width="120">
          <template v-slot="s">
            <el-tag v-if="s.row.qstatus==1">代签收</el-tag>
            <el-tag v-if="s.row.qstatus==2">已签收</el-tag>
            <el-tag v-if="s.row.qstatus==3">拒签</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
import {listLogistics} from "@/api/farme/farme";

export default {
  name: "LogisticsView",
  data() {
    return{
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:3,
    }
  },
  methods:{
    list(){
      listLogistics(this.pageNum,this.pageSize).then(r=>{
        this.tableData=r.data.list
        this.total=r.data.total
      })
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.list();
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.list();
    },
  },
  created() {
    this.list();
  }

}
</script>

<style scoped>

</style>
